<template>
  <a-modal
    title="重命名"
    :visible="visible"
    :centered="true"
    width="600px"
    :maskClosable="false"
    @cancel="handleCancel"
    @ok="handleOk"
    :afterClose="afterClose"
    destroyOnClose
  >
    <a-form-model ref="form" :model="form" v-bind="layout" :rules="rules">
      <a-form-model-item label="看板名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入看板名称" />
      </a-form-model-item>
      <a-form-model-item label="看板描述" prop="description">
        <a-textarea
          v-model="form.description"
          placeholder="请输入看板描述"
          :rows="4"
          style="resize: none"
        />
      </a-form-model-item>
      <a-form-model-item label="标签" prop="labels">
        <a-select v-model="form.labels" allowClear placeholder="请选择标签">
          <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="保存位置" prop="pathLevel">
        <a-select v-model="form.pathLevel" placeholder="请选择保存位置">
          <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { getDashboardCategoryTree } from "@/api/multidimensionalAnalysis"

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
}
export default {
  data() {
    return {
      visible:false,
      layout,
      form: {},
      rules: {},
      treeData: []
    }
  },
  created(){
    // 获取保存位置
    getDashboardCategoryTree()
    .then(data => {
      this.treeData = [ {
          id: 0,
          name: "根节点"
        },...(data.data || [])]
    })
  },
  methods: {
    show(val) {
      this.form = {
        ...val,
        pathLevel: val.parentPath
      }
      this.visible = true

    },
    handleCancel() {
      this.visible = false
      this.form = {}
    },
    handleOk(){
      this.$emit("ok", this.form)
      this.visible = false
      // this.form = {}
    },
    afterClose() {
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-col{
  margin: 0!important;
  padding: 0!important;
}
</style>
